<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>用户新增</title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css">
	<link rel="stylesheet" href="../../../admin/css/dimples.css">
	<link rel="icon" href="../../../admin/images/favicon.ico" type="image/x-icon"/>
</head>
<body>
<form class="layui-form">
	<div class="mainBox">
		<div class="main-container">
			<div class="main-container">
				<div class="layui-form-item">
					<label class="layui-form-label required">账号</label>
					<div class="layui-input-block">
						<input type="text" required name="username" autocomplete="off"
									 placeholder="请输入用户名" required lay-verify="required"
									 class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required ">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="realName" autocomplete="off"
									 placeholder="请输入姓名" required lay-verify="required" required
									 class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="text" name="email" lay-verify="email" autocomplete="off"
									 placeholder="请输入邮箱"
									 class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" name="password" lay-verify="title" autocomplete="off"
									 placeholder="请输入密码"
									 class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-block">
						<input type="text" name="mobile" lay-verify="phone" autocomplete="off"
									 placeholder="请输入电话"
									 class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="ssex" value="0" title="男">
						<input type="radio" name="ssex" value="1" title="女" checked>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">部门</label>
					<div class="layui-input-block" name="deptId" id="deptId">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">默认角色</label>
					<div class="layui-input-block" name="roleId" id="roleId">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="button-container">
			<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
							lay-filter="sysUser-save">
				<i class="layui-icon layui-icon-ok"></i>
				提交
			</button>
			<button type="reset" class="pear-btn pear-btn-sm">
				<i class="layui-icon layui-icon-refresh"></i>
				重置
			</button>
		</div>
	</div>
</form>
<!-- 依 赖 脚 本 -->
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../component/pear/dimples.js"></script>
<script>
    layui.use(['form', 'jquery', 'dtree', 'ajax', 'xmSelect'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let ajax = layui.ajax;
        let xmSelect = layui.xmSelect;
        let roleSelect;
        let deptSelect;

        ajax.send('/system/role', {}, function (result) {
            roleSelect.update({
                data: result.data
            });
        });

        ajax.send('/system/dept/tree', {}, function (result) {
            deptSelect.update({
                data: result.data
            });
        });

        roleSelect = xmSelect.render({
            el: '#roleId',
            empty: '呀, 没有数据呢',
            model: {label: {type: 'text'}},
            clickClose: true,
            prop: {
                name: 'roleName',
                value: 'roleId',
            },
            theme: {
                color: '#52c41a',
            },
            on: function (data) {
                if (data.isAdd) {
                    return data.change.slice(0, 1)
                }
            }
        });

        deptSelect = xmSelect.render({
            el: '#deptId',
            empty: '呀, 没有数据呢',
            model: {label: {type: 'text'}},
            clickClose: true,
            prop: {
                name: 'deptName',
                value: 'deptId'
            },
            theme: {
                color: '#52c41a',
            },
            tree: {
                //是否显示树状结构
                show: true,
                //是否严格遵守父子模式
                strict: false,
                //是否开启极简模式
                simple: false,
                //点击节点是否展开
                clickExpand: true,
                //点击节点是否选中
                clickCheck: true,
            },
            on: function (data) {
                if (data.isAdd) {
                    return data.change.slice(0, 1)
                }
            }
        });

        form.on('submit(sysUser-save)', function (data) {
            data.field.roleId = roleSelect.getValue('value')[0];
            data.field.deptId = deptSelect.getValue('value')[0];
            console.log(data.field);

            ajax.send('/system/user', {
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
            }, function (result) {
                layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                    parent.layui.table.reload("user-table");
                });
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>